<template>
  <div class="services-page">
    <h1>满意服务</h1>
    
    <div class="service-categories">
      <button 
        v-for="category in categories" 
        :key="category" 
        @click="selectCategory(category)"
        :class="['category-btn', { active: selectedCategory === category }]"
      >
        {{ category }}
      </button>
    </div>
    
    <div v-if="loading" class="loading">加载中...</div>
    
    <div v-if="services.length > 0" class="services-grid">
      <div 
        v-for="service in services" 
        :key="service.id" 
        class="service-card"
        @click="viewServiceDetails(service)"
      >
        <h3>{{ service.title }}</h3>
        <p class="category">{{ service.category }}</p>
        <div class="content" v-html="truncateContent(service.content)"></div>
        <button class="read-more-btn">查看详情</button>
      </div>
    </div>
    
    <div v-if="showDetail" class="service-detail-overlay">
      <div class="service-detail-modal">
        <div class="detail-header">
          <h2>{{ selectedService.title }}</h2>
          <span class="close-btn" @click="closeDetail">&times;</span>
        </div>
        <div class="detail-content" v-html="selectedService.content"></div>
      </div>
    </div>
  </div>
</template>

<script>
import api from '../api'

export default {
  name: 'ServicesView',
  data() {
    return {
      categories: ['行李政策', '贵宾厅服务', '退改签说明', '机上服务', '其他服务'],
      selectedCategory: '行李政策',
      services: [],
      loading: false,
      showDetail: false,
      selectedService: {}
    }
  },
  async mounted() {
    await this.loadServicesByCategory(this.selectedCategory)
  },
  methods: {
    async loadServicesByCategory(category) {
      this.loading = true
      try {
        const response = await api.get(`/services/category/${category}`)
        this.services = response.data
      } catch (error) {
        console.error('获取服务信息失败:', error)
        alert('获取服务信息失败，请稍后重试')
      } finally {
        this.loading = false
      }
    },
    async selectCategory(category) {
      this.selectedCategory = category
      await this.loadServicesByCategory(category)
    },
    viewServiceDetails(service) {
      this.selectedService = service
      this.showDetail = true
    },
    closeDetail() {
      this.showDetail = false
    },
    truncateContent(content) {
      if (!content) return ''
      // 简单截取前100个字符，如果内容太长
      return content.length > 100 ? content.substring(0, 100) + '...' : content
    }
  }
}
</script>

<style scoped>
.services-page {
  max-width: 1200px;
  margin: 0 auto;
}

.services-page h1 {
  font-size: 2rem;
  margin-bottom: 1.5rem;
  color: #333;
}

.service-categories {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-bottom: 2rem;
}

.category-btn {
  padding: 0.5rem 1rem;
  background-color: #f0f0f0;
  border: 1px solid #ddd;
  border-radius: 4px;
  cursor: pointer;
  font-size: 0.9rem;
}

.category-btn:hover {
  background-color: #e0e0e0;
}

.category-btn.active {
  background-color: #003366;
  color: white;
}

.loading {
  text-align: center;
  padding: 2rem;
  font-size: 1.2rem;
  color: #666;
}

.services-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 1.5rem;
}

.service-card {
  padding: 1.5rem;
  border: 1px solid #ddd;
  border-radius: 8px;
  background-color: white;
  cursor: pointer;
  box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

.service-card:hover {
  box-shadow: 0 4px 8px rgba(0,0,0,0.15);
}

.service-card h3 {
  margin-top: 0;
  margin-bottom: 0.5rem;
  color: #333;
}

.category {
  color: #666;
  font-size: 0.9rem;
  margin-bottom: 1rem;
}

.content {
  margin-bottom: 1rem;
  color: #555;
  line-height: 1.5;
}

.read-more-btn {
  padding: 0.5rem 1rem;
  background-color: #003366;
  color: white;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  font-size: 0.9rem;
}

.read-more-btn:hover {
  background-color: #002244;
}

.service-detail-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0,0,0,0.7);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 1000;
}

.service-detail-modal {
  background-color: white;
  border-radius: 8px;
  width: 80%;
  max-width: 800px;
  max-height: 80vh;
  overflow-y: auto;
  padding: 2rem;
  position: relative;
}

.detail-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 1rem;
  padding-bottom: 1rem;
  border-bottom: 1px solid #eee;
}

.detail-header h2 {
  margin: 0;
  color: #333;
}

.close-btn {
  font-size: 1.5rem;
  cursor: pointer;
  color: #999;
}

.close-btn:hover {
  color: #333;
}

.detail-content {
  line-height: 1.6;
  color: #555;
}
</style>